<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>京东首页</title>
</head>
<!--css-->
<link rel="stylesheet" type="text/css" href="jd_index.css">
<body>
    <!--1.top部分-->
    <header id="top">
        <div id="top_box">
            <div class="lf">
                <img src="Images/star.jpg">
                <a href="#">收藏京东</a>
            </div>
            <div class="rf">
             <ul>
                 <li>
                     您好，欢迎来到京东!
                     <a href="#">[登录]</a>
                     <a href="#">[免费注册]</a>
                 </li>
                 <li>
                     <b></b> <!--左侧分割线-->
                     <a href="#">我的订单</a>
                 </li>
                 <li class="vip">
                    <b></b> <!--左侧分割线-->
                    <a href="#">会员俱乐部</a>
                </li>
                <li class="dakehu">
                    <b></b> <!--左侧分割线-->
                    <a href="#">企业频道</a>
                </li>
                <li class="app">
                    <b></b> <!--左侧分割线-->
                    <a href="#">手机京东</a>
                </li>
                <li class="service">
                    <b></b> <!--左侧分割线-->
                    <a href="#">客户服务</a>
                    <div id="service_items">
                     <ul>
                        <li>
                            <a href="#">帮助中心</a>
                        </li>
                        <li>
                            <a href="#">售后服务</a>
                        </li>
                        <li>
                            <a href="#">
                            在线客服</a>
                        </li>
                        <li>
                         <a href="#">投诉中心</a>
                     </li>
                     <li>
                        <a href="#">
                        客服邮箱</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <b></b> <!--左侧分割线-->
            <a href="#">网站导航</a>
        </li>
    </ul> 
</div>
</div>
</header>
<!--2.logo和搜索框-->
<div id="top_main">
    <a href="jd_index.html" class="lf"><img src="Images/logo-201305.png"></a>
    <div id="search_box" class="lf">
     <div class="search">
         <input type="text" class="txtSearch">
         <button type="button">搜索</button>
     </div> 
     <div class="hot_words">
        <span>热门搜索:</span>
        <a href="#">家纺11月大促</a>
        <a href="#">彩虹电热毯</a>
        <a href="#">博洋家纺</a>
        <a href="#">霞珍</a>
        <a href="#">床垫床褥</a>
        <a href="#">九洲鹿被子</a>
        <a href="#">南极人家纺</a>
    </div>
</div>
<div id="my_jd" class="lf">
    我的京东
    <b></b>
</div>
<div id="shopping" class="lf">
    购物车结算
    <b></b>
</div>
<div class="clear"></div>
</div>
<!--3.导航栏-->
<nav id="nav">
    <p>
        <a href="#">全部商品分类</a>
        <b></b>
    </p>
    <ul>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">服装城</a>
        </li>
        <li>
            <a href="#">食品</a>
        </li>
        <li>
            <a href="#">团购</a>
        </li>
        <li>
            <a href="#">夺宝岛</a>
        </li>
        <li>
            <a href="#">闪购</a>
        </li>
        <li>
            <a href="#">金融</a>
        </li>
    </ul>
</nav>
<!--4.广告部分-->
<div id="banner">
    <div id="cate_box">
        <ul>
            <li>
                <a href="#">图书、音像、数字商品</a>
            </li>
            <li>
                <a href="#">家用电器</a>
                <!-- 弹出框 -->
            </li>
        </ul>
        <div id="sub_cate_box">
            <div class="close">X</div>
            <div id="sub_cate_items">
                <ul>
                    <li class="title"><a href="#">电子书</a></li>
                    <li><a href="#">免费</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">励志与成功</a></li>
                    <li><a href="#">婚恋与两性</a></li>
                    <li><a href="#">文学</a></li>
                    <li><a href="#">经营</a></li>
                    <li><a href="#">畅读VIP</a></li>
                </ul>
                <ul>
                    <li class="title"><a href="#">电子书</a></li>
                    <li><a href="#">免费</a></li>
                    <li><a href="#">小说</a></li>
                    <li><a href="#">励志与成功</a></li>
                    <li><a href="#">婚恋与两性</a></li>
                    <li><a href="#">文学</a></li>
                    <li><a href="#">经营</a></li>
                    <li><a href="#">畅读VIP</a></li>
                </ul>
            </div>
            <div id="sub_cate_banner">
                <a href="#">
                    <img src="Images/cate_banner_01.jpg" alt="">
                </a>
                <a href="#">
                    <img src="Images/cate_banner_02.jpg" alt="">
                </a>

                <h4 class="title">推荐品牌出版社/书店</h4>

                <ul>
                    <li>
                        <a href="#">中华书局</a>
                    </li>
                    <li>
                        <a href="#">人民邮电出版社</a>
                    </li>
                    <li>
                        <a href="#">上海世纪出版股份有限公司</a>
                    </li>
                    <li>
                        <a href="#">电子工业出本社</a>
                    </li>
                    <li>
                        <a href="#">三联书店</a>
                    </li>
                    <li>
                        <a href="#">浙江少年儿童出版社</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="slider_box">
        <div id="slider">
            <a href="#"><img src="Images/index/banner_02.jpg" alt=""></a>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div id="slider_items">
            <a href="#" class="left_arrow"></a>
            <ul>
                <li class="left"></li>
                <li class="middle"></li>
                <li class="right"></li>
            </ul>
            <a href="#" class="right_arrow"></a>
        </div>
    </div>
    <div id="news_box">
        <a href="#"><img src="Images/index/ad_focus.jpg"></a>

        <div id="jd_report">
            <div class="title">
                <span class="lf">京东快报</span>
                <a href="#" class="rf">更多快报</a>
            </div>
            <div class="report">
                <ul class="lf">
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                </ul>
                <ul class="rf">
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                    <li>
                        <a href="#">松鼠好年货，2折开抢</a>
                    </li>
                </ul>
            </div>
        </div>

        <ul id="tabs">
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <b></b>
                    话费
                    <i></i>
                </a>
            </li>
        </ul>
    </div>
</div>
<!--5.页面主体-->
<section id="main">
    <p>生活的橱窗<i>每一天展示精彩</i></p>
    <ul>
        <li class="pin" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="price" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="things" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="shopping">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="mobile" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="shoes" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="music" style="margin-right: 10px;">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="food">
            <div>
                <div class="show_part">
                    <h3>品牌街</h3>
                    <p>三星note</p>
                    <a href="#">领京东500E卡</a>
                    <ul>
                        <li><a href="#">更多品牌</a></li>
                        <li><a href="#">进入品牌坊</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
    <div id="show_ads">
        <ul>
            <li style="margin-right: 10px;">
                <a href="#">
                    <img src="Images/index/ad_small_01.jpg">
                </a>
            </li>
            <li style="margin-right: 10px;">
                <a href="#">
                    <img src="Images/index/ad_small_02.jpg">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="Images/index/ad_small_03.jpg">
                </a>
            </li>
        </ul>
    </div>
    <!--第一楼-->
    <div class="floor">
        <!--头部-->
        <header>
            <span>1F</span>
            <p>家电通讯</p>
            <ul class="tab">
                <li><a href="#">特价商品</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">小家电</a></li>
                <li><a href="#">手机通讯</a></li>
                <li><a href="#">汽车五金</a></li>
            </ul>
            <ul class="links lf">
                <li><a href="#">大家电配送</a></li>
                <li><a href="#">合约计划说明</a></li>
            </ul>
        </header>
        <!--中间-->
        <div id="content">
            <aside class="lf_list">
                <!--文字-->
                <ul>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">手机</a></li>
                </ul>
                <!--图像-->
                <p>
                    <a href="#">
                        <img src="Images/index/fl_01.jpg" alt="">
                    </a>
                </p>   
            </aside>
            <div class="middle">
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <div>
                    <img src="Images/index/fl_ad_01.jpg">
                </div>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="Images/index/fl_dl_01.jpg">
                    </dt>
                    <dd>
                        <a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
                    </dd>
                    <dd class="text">
                        送澳门风云2电影票
                    </dd>
                </dl>
            </div>
            <aside class="rf_list">
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
                <p>
                    <a href="#">
                        <img src="Images/index/fl_ad_02.jpg" alt="">
                    </a>
                </p>
            </aside>
        </div>
        <!--尾部-->
        <div id="other">
            <div id="left_part">
                <div class="share">
                    <p>热门晒单</p>
                    <ul>
                        <li>
                            <p>
                                <img src="Images/index/share_01.jpg">
                                <i class="share"></i>
                            </p>
                            <div class="lf">
                                <h3><a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a></h3>
                                <h4><a href="#">音质还可以，不错的，很小，很大声，很好看。</a></h4>
                            </div>
                        </li>
                        <li>
                            <p>
                                <img src="Images/index/share_01.jpg">
                                <i class="share"></i>
                            </p>
                            <div class="lf">
                                <h3><a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a></h3>
                                <h4><a href="#">音质还可以，不错的，很小，很大声，很好看。</a></h4>
                            </div>
                        </li>
                    </ul>  
                </div>
                <div class="share">
                    <p>热门晒单</p>
                    <ul>
                        <li>
                            <p>
                                <img src="Images/index/share_01.jpg">
                                <i class="share"></i>
                            </p>
                            <div class="lf">
                                <h3><a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a></h3>
                                <h4><a href="#">音质还可以，不错的，很小，很大声，很好看。</a></h4>
                            </div>
                        </li>
                        <li>
                            <p>
                                <img src="Images/index/share_01.jpg">
                                <i class="share"></i>
                            </p>
                            <div class="lf">
                                <h3><a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a></h3>
                                <h4><a href="#">音质还可以，不错的，很小，很大声，很好看。</a></h4>
                            </div>
                        </li>
                    </ul>  
                </div>
            </div>
            <div id="right_part">
                <span>在线读书</span>
                <a href="#" class="rf">更多在线读书</a>
                <div>
                    <img src="Images/index/reading.jpg" class="lf">
                    <ul class="rf">
                        <li><a href="#">来到地球第一天 新书推荐</a></li>
                        <li><a href="#">《袁腾飞讲先秦》(套装全两册)</a></li>
                        <li><a href="#">《只为成功方法》升职宝典</a></li>
                        <li><a href="#">《如果世界只有我和你》蔡骏荐</a></li>
                    </ul>
                </div>
            </div>
            <div id="input_box">
                <p>订阅促销信息</p>
                <input type="text" placeholder="请输入您的Email地址">
                <button type="button">订阅</button>
            </div>

        </div>
        
    </div>
    <div class="clear"></div>
</section>
<!--6.页面底部-购物指南-->
<footer id="foot_box">
    <ul id="box">
        <li>
            <p></p>
            <div>
                <p>购物指南</p>
                <ul class="sub_box">
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>团购/机票</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
        </li>
        <li>
            <p></p>
            <div>
                <p>购物指南</p>
                <ul class="sub_box">
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>团购/机票</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
        </li>
        <li>
            <p></p>
            <div>
                <p>购物指南</p>
                <ul class="sub_box">
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>团购/机票</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
        </li>
        <li>
            <p></p>
            <div>
                <p>购物指南</p>
                <ul class="sub_box">
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>团购/机票</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
        </li>
        <li>
            <p></p>
            <div>
                <p>购物指南</p>
                <ul class="sub_box">
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>团购/机票</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
            </div>
        </li>
    </ul>
</footer>
<!--7.页面底部-备案号-->
<footer id="footer">
    <div>
        <ul>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li>关于我们</li>
            <li class="no_border">关于我们</li>
        </ul>
    </div>
    <br>
    <p>2222222222222222222222222222222222</p>
    <p>222222222222222222222</p>
    <p>22222222222222222222222222222222222222</p>
    <p>2222222222222222</p>
</footer>
</body>
</html>